<template>
  <div class="wrap">
    <div class="step">
      <up-steps current="3">
        <up-steps-item title="营业执照" />
        <up-steps-item title="银行证明材料" />
        <up-steps-item title="门店门头照片" />
        <up-steps-item title="审核状态" />
      </up-steps>
    </div>
    <div class="space" />
    <div v-if="form.status === 3 || form.coopStatus === 3" class="under_review">
      <div style="text-align: center">
        <Image name="review_reject" oss size="110" type="png" />
      </div>
      <div class="reject_tip">您提交的资料企业已驳回，驳回理由：</div>
      <div class="reject_reason">{{ form.rejectReason }}</div>
    </div>
    <!--  审核中  -->
    <div v-else class="under_review_1">
      <Image name="under_review" oss size="110" />
      <div v-if="form.isSelfEnterprise" class="reject_tip mt48">您的资料企业正在审核，请稍后查看~</div>
      <div v-else class="reject_tip mt20">
        <div>还差一步，您的资料企业就可以审核了~</div>
        <div>请法人查看手机短信，点击链接完成企业认证</div>
      </div>
    </div>
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button size="L" @confirm="operateFn">{{ operateBtnName }}</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Image from '@C/Image.vue'
import { keepBottomSafeDis, onLoad, Router, onShow } from '@U/common'
import Button from '@C/Button.vue'
import { computed, reactive } from 'vue'
import { getExternalEnterprisesInfo } from './request'

const form = reactive({
  id: '',
  isSelfEnterprise: true,
  rejectReason: '',
  status: 0,
  coopStatus: 0,
})
// 获取外部其他企业信息
const getExternalEnterprisesInfoFn = async () => {
  const res = await getExternalEnterprisesInfo({ id: form.id }).finally(() => {})
  if (res?.code === 200) {
    form.id = res.data.id
    form.isSelfEnterprise = res.data.isSelfEnterprise
    form.rejectReason = res.data.rejectReason
    form.status = res.data.profileStatus
    form.coopStatus = res.data.coopStatus
  }
}
onLoad((option: any) => {
  if (option.id) form.id = option.id
})
onShow(() => {
  getExternalEnterprisesInfoFn()
})
const operateBtnName = computed(() => {
  let text = ''
  if (form.status === 3 || form.coopStatus === 3) text = '去修改'
  else text = '返回合作主体管理'
  return text
})
const operateFn = () => {
  if (form.status === 1) return Router.back()
  if (form.status === 2) {
    if (form.coopStatus === 1) return Router.back()
    if (form.coopStatus === 3) return Router.push('new_add_bank_prove_material', { id: form.id })
  }
  if (form.status === 3) {
    return Router.push('new_add_business_license', { id: form.id })
  }
}
</script>

<style lang="less" scoped>
.wrap {
  background-color: #fff;
  /deep/ .u-steps {
    display: flex;
  }
  .step {
    border-top: 2rpx solid #f2f2f7;
    padding: 28rpx 0;
    /deep/ .u-steps-item__wrapper__circle {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
    }
    /deep/ .u-steps-item__wrapper--row {
      width: auto;
    }
    /deep/ .u-text__value {
      font-size: 24rpx !important;
    }
    /deep/ .u-text__value--main {
      color: #1890FF;
    }
  }
  .space {
    height: 24rpx;
    background: #f2f2f7;
  }
  .under_review, .under_review_1 {
    padding: 190rpx 132rpx 60rpx 134rpx;
    background-color: #fff;
    .reject_tip {
      font-weight: 400;
      font-size: 28rpx;
      color: #8C8C8C;
      line-height: 40rpx;
      margin: 40rpx 0 16rpx;
    }
    .reject_reason {
      font-weight: 400;
      font-size: 28rpx;
      color: #FF8002;
      line-height: 44rpx;
    }
  }
  .under_review_1 {
    text-align: center;
    padding: 184rpx 90rpx 60rpx;
    background-color: #fff;
  }
}
</style>
